<template>
	<!-- 创建编辑新考试 -->
	<div class="addExamMain">
		<div class="addExamContent">
			<h3>{{tabnumber==1?'新增':'编辑'}}教师</h3>
			<el-form :model="updataobj" :rules="rules" ref="teacherForm">
				<ul>
					<li>
						<span>手机号： </span>
						<div class="inputBox">
							<el-form-item prop="phoneNumber">
								<el-input v-model="updataobj.phoneNumber" placeholder="请输入手机号" clearable></el-input>
							</el-form-item>
						</div>
					</li>
					<li>
						<span>姓名：</span>
						<div class="inputBox">
							<el-form-item prop="username">
								<el-input v-model="updataobj.username" placeholder="请输入姓名" clearable></el-input>
							</el-form-item>
						</div>
					</li>
					<li>
						<span>角色：</span>
						<div class="inputBox">
							<el-form-item prop="roletype">
								<el-select v-model="updataobj.roletype" placeholder="请选择角色">
									<el-option
										v-for="item in role"
										:key="item.id"
										:label="item.name"
										:value="item.id">
									</el-option>
								</el-select>
							</el-form-item>
						</div>
					</li>
					<li>
						<span>学校：</span>
						<div class="inputBox">
							<el-form-item prop="gradeid">
								<el-select v-model="updataobj.gradeid" placeholder="请选择学校">
									<el-option
										v-for="item in schoollist"
										:key="item.gradeid"
										:label="item.schoolname"
										:value="item.gradeid">
									</el-option>
								</el-select>
							</el-form-item>
						</div>
					</li>
					<li>
						<span>学科：</span>
						<div class="inputBox">
							<el-form-item prop="subjectid">
								<el-select v-model="updataobj.subjectid" placeholder="请选择学科" :disabled="tabnumber==1?false:true">
									<el-option
										v-for="item in subjectlist"
										:key="item.id"
										:label="item.subjectname"
										:value="item.id">
									</el-option>
								</el-select>
							</el-form-item>
						</div>
					</li>
				</ul>
				<div class="groupbutton">
					<el-button type="primary" @click="submitForm">保存</el-button>
					<el-button type="primary" @click="goback">返回</el-button>
				</div>
			</el-form>
		</div>
	</div>
</template>

<script>
	import {getexamallschool,getSubjectslist,getaddteacher} from '../../api/api.js'
	export default{
		props:['examobj','addexamtype','tabnumber','role','schoolEdit'],
		data(){
			return{
				schoollist:[],
				subjectlist:[],
				updataobj:{
					userid:0,
					username:'',
					gradeid:'',
					nav5id:'',
					phoneNumber:'',
					roletype:'',
					subjectid:''
				},
				rules: {
					phoneNumber: [
						{ required: true, message: '请输入手机号', trigger: 'blur' },
					],
					username: [
						{ required: true, message: '请输入姓名', trigger: 'blur' }
					],
					roletype: [
						{ required: true, message: '请选择角色', trigger: 'change' }
					],
					gradeid: [
						{ required: true, message: '请选择学校', trigger: 'change' }
					],
					subjectid: [
						{ required: true, message: '请选择学科', trigger: 'change' }
					]
				}
			}
            
		},
		mounted() {
			this.examcontent = JSON.parse(sessionStorage.getItem('examContent'));
			this.getschooldetails()
			this.getsubjectlistclick()
			console.info('this.schoolEdit',this.schoolEdit)
			if(this.schoolEdit!={}){
				this.updataobj.username= this.schoolEdit.username
				this.updataobj.userid= this.schoolEdit.id || 0
				this.updataobj.gradeid= this.schoolEdit.gradeid
				this.updataobj.phoneNumber= this.schoolEdit.phoneNumber
				this.updataobj.roletype= this.schoolEdit.roletype
				this.updataobj.subjectid= this.schoolEdit.subjectid
			}
			// this.filteredOptions = [...this.examclassify]
		},
		methods:{
			// 获取学校列表
			getschooldetails(){
				let obj={
					nav5id:this.examcontent.nav5id
				}
				getexamallschool(obj).then(res=>{
					if(res.code==0){
						this.schoollist = res.obj
					}else{
						this.$message({
							message: res.msg,
							type: 'error'
						})
					}
				})
			},
			//获取学科列表
			getsubjectlistclick(){
				getSubjectslist().then(res=>{
				    if(res.code==0){
						this.subjectlist = res.obj
					}else{
						this.$message({
							message: res.msg,
							type: 'error'
						})
					}
				})
			},
            onSelected(){
				
			},
            filterMethod(query) {
                this.searchQuery = query
                this.filteredOptions = this.examclassify.filter(item => 
                    item.name.toLowerCase().includes(query.toLowerCase())
                )
            },
            goback(){
				this.$emit('addSchoolclick',false)
			},
            submitForm() {
				this.$refs.teacherForm.validate((valid) => {
				if (valid) {
					// 验证通过，执行保存操作
					this.surebc()
				} else {
					// 验证失败
					return false
				}
				})
			},
			surebc(){
				this.updataobj.nav5id = this.examcontent.nav5id
				getaddteacher(this.updataobj).then(res=>{
				    
					if(res.code==0){
						this.$emit('addSchoolclick',false)
						this.$message({
							message: res.msg,
							type: 'success'
						})
						// this.resetForm()
					}else{
						this.$message({
							message: res.msg,
							type: 'error'
						})
					}
				})
			},
			 // 新增重置表单方法
			resetForm() {
				this.$refs.teacherForm.resetFields() // 重置表单验证状态
				this.updataobj = {
					userid:0,
					username: '',
					gradeid: '',
					nav5id: '',
					phoneNumber: '',
					roletype: '',
					subjectid: ''
				}
			},
		}
	}
</script>

<style scoped>
	.addExamMain{
		position: fixed;
		width:100%;
		height:100%;
		background:rgba(0,0,0,0.5);
		left:0;
		top:0;
		z-index:100;
	}
	.addExamContent{
		width: 584px;
		height: auto;
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		border-radius: 10px;
		position: fixed;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		z-index:2;
		box-sizing: border-box;
		padding:30px;
	}
	.addExamContent h3{
		font-size:18px;
		padding-bottom:20px;
	}
	.addExamContent ul li{
		display: flex;
		align-items: center;
		padding-bottom:14px;
		font-size:14px;
	}
	.addExamContent ul li span{
		font-size:14px;
		width:80px;
		color: #557292;
		text-align: right;
	}
	.addExamContent ul li p{
		position: relative;
	}
	.addExamContent ul li p em{
		position: absolute;
		right:10px;
		top:50%;
		transform: translateY(-50%);
		color:#C0C4CC;
		cursor: pointer;
	}
	.addExamContent ul li >>>.el-input__inner{
		width: 400px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.inputBox{
		width: 400px;
	}
	.inputBox1{
		width: 300px;
	}
	.addExamContent ul li div.inputBox1 >>> .el-input__inner{
		width:300px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.addExamContent ul li >>> .el-range__icon{
		line-height:27px;
	}
	.groupbutton{
		display: flex;
		align-items: center;
		padding-top:20px;
	}
	.groupbutton >>> .el-button{
		width: 124px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		font-size: 14px;
		color: #FFFFFF;
		padding:0;
	}
	.groupbutton >>> .el-button:last-child{
		background: #F2F6FB;
		border-radius: 10px;
		border: 1px solid #295CFF;
		color:#295CFF;
		margin-left:24px;
	}
	.bcontentcolor{
		font-size:14px;
		color:#295CFF;
		display: inline-block;
		margin-left:20px;
		cursor: pointer;
	}
	.el-checkbox{
		margin-right:8px;
	}
	.infosetcontentfont{
		color:#5B6371
	}
	.addExamContent ul li.infosetcontentfont span{
		width:auto;
		height: 26px;
		border-radius: 4px;
		border: 1px solid #D8E4F0;
		color:#B3B8C2;
		font-size:14px;
		text-align:left;
		line-height:26px;
		padding:0 16px 0 10px;
		margin-left:10px;
	}
	.addExamContent ul li.infosetcontentfont i{
		font-style:normal;
		color:#295CFF;
		padding:0 4px;
	}
    .addExamContent >>> .distpicker-address-wrapper select{
        height:36px;
        border-radius:10px;
        border:1px solid #D8E4F0;
        color:#999;
    }
	.inputBox1 >>> .el-tag.el-tag--info{
		background: #F2F6FB;
		border: 1px solid #D8E4F0;
		color: #B3B8C2;
	}
	.inputBox1 >>> .el-select .el-tag__close.el-icon-close{
		background:none;
		color:#B3B8C2;
	}
    .inputBox >>> .distpicker-address-wrapper select{
		border-radius: 10px;
    	height: 35px;
		font-size: 16px;
		line-height: 35px;
		border: 1px solid #D8E4F0;
		color:#606266;
		padding:0 10px;
	}
	.addExamContent >>> .el-form-item{
		margin:0;
	}
</style>